
<template>
  <div
    :style="styleObject"
    @mouseenter="mouseenter"
    @mouseout="mouseout"
    @click="showAd = false"
    v-if="showAd"
  >
    麻烦给颗小星星哦<br />(give me one star,please ^_^)
  </div>
</template>


<script>
export default {
  name: "App",

  data() {
    return {
      /* 广告相关 */
      styleObject: {
        width: "300px",
        backgroundColor: "#bfc",
        height: "200px",
        position: "absolute",
        top: 500 + "px",
        left: 500 + "px",
      },
      state: 0, // 0右下 1 右上 2 左下 3左上
      aa: null,
      showAd: true,
    };
  },

  methods: {
    //鼠标移出
    mouseout() {
      if (!this.aa) {
        this.changeLocation();
      }
    },
    //鼠标移入
    mouseenter() {
      if (this.aa) {
        clearTimeout(this.aa);
        this.aa = null;
      }
    },
    //上下左右移动，调节每次移动距离
    toLeft() {
      this.styleObject.left =
        Number(this.styleObject.left.slice(0, -2)) - 1 + "px";
    },
    toRight() {
      this.styleObject.left =
        Number(this.styleObject.left.slice(0, -2)) + 1 + "px";
    },
    toTop() {
      this.styleObject.top =
        Number(this.styleObject.top.slice(0, -2)) - 1 + "px";
    },
    toBottom() {
      this.styleObject.top =
        Number(this.styleObject.top.slice(0, -2)) + 1 + "px";
    },
    //上下左右移动，开启定时器形成动画
    changeLocation() {
      this.aa = setTimeout(() => {
        if (this.state == 0) {
          // 0右下 1 右上 2 左下 3左上
          this.toRight();
          this.toBottom();
        } else if (this.state == 1) {
          this.toRight();
          this.toTop();
        } else if (this.state == 2) {
          this.toLeft();
          this.toBottom();
        } else if (this.state == 3) {
          this.toLeft();
          this.toTop();
        }

        if (
          Number(this.styleObject.top.slice(0, -2)) + 310 >
          /* window.innerHeight */
          window.screen.availHeight + document.documentElement.scrollTop
        ) {
          // 底部超出
          /*  console.log(this.state); */
          if (this.state == 0) {
            this.state = 1;
          } else if (this.state == 2) {
            this.state = 3;
          }
        } else if (
          Number(this.styleObject.top.slice(0, -2)) <
          0 + document.documentElement.scrollTop
        ) {
          // 顶部超出
          if (this.state == 1) {
            this.state = 0;
          } else if (this.state == 3) {
            this.state = 2;
          }
        } else if (
          Number(this.styleObject.left.slice(0, -2)) + 310 >
          /* window.innerWidth */
          window.screen.availWidth
        ) {
          // 右侧超出
          if (this.state == 1) {
            this.state = 3;
          } else if (this.state == 0) {
            this.state = 2;
          }
        } else if (Number(this.styleObject.left.slice(0, -2)) < 0) {
          // 左侧超出
          if (this.state == 3) {
            this.state = 1;
          } else if (this.state == 2) {
            this.state = 0;
          }
        }
        this.changeLocation();
      }, 15);
    },
  },
  mounted() {
    this.changeLocation();
  },
};
</script>
